<template>
  <div>
    <el-select v-model="formInline.enrollProject" filterable clearable :multiple="multiple" :size="size" :multiple-limit="3" @change="onChange">
      <el-option v-for="(item,index) in projectList" :key="index" :label="item.name" :value="item.id"></el-option>
    </el-select>
  </div>
</template>
<script>
import { GETPROJECTOPTIONS } from "@/http/system";
export default {
  name: "ProjectSelect",
  props: {
    value: {
      type: [String, Number],
      default: "",
    },
    size:{
      type:String,
      default:''
    },
    multiple: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      projectList: this.$store.state.projectList,
      formInline: {},
    };
  },
  watch: {
    value: {
      handler: function (n, o) {
        if (!n) {
          this.formInline = {};
        }
        // 多选
        if(!n){
          return false
        }
        if (this.multiple) {
          this.$set(
            this.formInline,
            "enrollProject",
            n.split(",").map((k) => Number(k))
          );
        } else {
          this.$set(this.formInline, "enrollProject", Number(n));
        }
      },
      immediate: true,
    },
  },
  created() {
    let n = this.$store.state.projectList;
    // if (!n || n.length <= 0) {
    //   this.getList();
    // }
    this.getList();
  },
  methods: {
    // 获取城市
    getList() {
      GETPROJECTOPTIONS().then((res) => {
        let list = res.data || [];
        this.projectList = list;
        this.$store.commit("SET_PROJECT_LIST",list);
      });
    },

    // 监听组件变化
    onChange(e) {
      console.log(e);
      this.$emit("input", e.toString());
      this.$emit("change", e);
    },
  },
};
</script>
<style lang="scss" scoped>
</style>